<template>
  <el-dialog
    title="操作轨迹"
    class="addDialog"
    :visible.sync="dialogVisible1"
    :before-close="handleClose"
    :close-on-click-modal="false"
    width="55%"
  >
    <div class="block">
      <el-timeline>
        <el-timeline-item timestamp="2024/2/21" placement="top">
          <el-card>
            <h4>单点登录 CRM</h4>
            <h4>风险事件 绕行</h4>
            <p>huchengbo 操作于 2024/2/21 20:46</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/2/21" placement="top">
          <el-card>
            <h4>登录4A系统</h4>
            <p>huchengbo 操作于 2024/2/21 20:45</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/2/21" placement="top">
          <el-card>
            <h4>登录IP:123.3.3.3设备</h4>
            <p>huchengbo 操作于 2024/2/21 20:45</p>
          </el-card>
        </el-timeline-item>
        <!-- <el-timeline-item timestamp="2018/4/1" placement="top">
          <el-card>
            <h4>更新 Github 模板</h4>
            <p>王小虎 提交于 2018/4/1 20:46</p>
          </el-card>
        </el-timeline-item> -->
      </el-timeline>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">返 回</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: "rule",
  components: {},
  props: {
    dialogVisible1: {
      type: Boolean,
      default: false,
    },
    editFlag: {
      type: Boolean,
      default: false,
    },
    scene: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sceneList: [
        {
          label: "异常时间登录",
          value: "1",
        },
        {
          label: "异常IP登录",
          value: "2",
        },
      ],
      rules: [
        {
          label: "完全匹配",
          value: "0",
        },
        {
          label: "频次匹配",
          value: "1",
        },
        {
          label: "区间匹配",
          value: "2",
        },
      ],
      attrList: [
        {
          label: "IP属性",
          value: "0",
        },
        {
          label: "时间属性",
          value: "1",
        },
      ],
      zhouqis: [
        {
          label: "月",
          value: "1",
        },
        {
          label: "周",
          value: "2",
        },
        {
          label: "日",
          value: "3",
        },
      ],
      fontOptions: [
        {
          value: "微软雅黑",
          label: "微软雅黑",
        },
        {
          value: "宋体",
          label: "宋体",
        },
        {
          value: "仿宋",
          label: "仿宋",
        },
        {
          value: "黑体",
          label: "黑体",
        },
        {
          value: "楷体",
          label: "楷体",
        },
        {
          value: "等线",
          label: "等线",
        },
      ],
      vpnform: {
        host: "",
        content: "",
        rotation: 15,
        size: 16,
        font: "微软雅黑",
        color: "#f0f0f0",
        width: "250",
        height: "150",
        transparency: 50,
        time: [new Date(), new Date()],
        timeangle: new Date(),
      },
      rulesVpnform: {
        host: [
          { required: true, message: "请输入资源地址", trigger: "blur" },
          //   { validator: validateIpPort, trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        content: [
          { required: true, message: "请输入水印内容", trigger: "blur" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        font: [
          { required: true, message: "请选择字体", trigger: "change" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        size: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请输入水印大小" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        rotation: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请输入旋转角度" },
          // { type: "number", message: "角度必须为数字值" },
        ],
        width: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请输入宽度" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        height: [
          //   { validator: checkNumber, trigger: "blur" },
          { required: true, message: "请输入高度" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        transparency: [
          // { validator: checkTransparency, trigger: "blur" },
          { required: true, message: "请输入透明度", trigger: "blur" },
        ],
      },
    };
  },
  watch: {},
  computed: {
    showForm() {
      if (this.vpnform.type == 0) {
        if (this.vpnform.attr == 0) {
          return 0;
        } else if (this.vpnform.attr == 1) {
          return 1;
        } else {
          return 2;
        }
      } else {
        return 2;
      }
    },
  },
  methods: {
    formatTrancy(val) {
      let a = Number(val);
      return Math.round(a * 100) + "%";
    },
    formatTooltip(val) {
      return val + "%";
    },
    formatTooltipRotation(val) {
      return val + "°";
    },
    formatTooltipSize(val) {
      return val;
    },
    handleChange(val) {
      console.log(val);
    },
    add(row) {
      this.vpnform = row;
      this.$refs?.addform?.clearValidate();
    },
    edit(row) {
      const {
        host,
        content,
        size,
        rotation,
        font,
        color,
        width,
        height,
        transparency,
      } = row;
      this.vpnform = {
        host,
        content,
        size,
        rotation,
        font,
        color,
        width,
        height,
        transparency: Math.round(transparency * 100),
      };
      this.$refs?.addform?.clearValidate();
    },
    submitaddForm(val) {
      this.$refs["addform"].validate((val) => {
        this.$emit("submit", val);
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible1", false);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body{
  padding: 10px !important;
}
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}
::v-deep .el-button {
  .el-icon-edit + span {
    margin-left: 0px;
  }
  .el-icon-delete + span {
    margin-left: 0px;
  }
}
::v-deep .el-dialog {
  min-width: 640px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.addDialog {
  .el-dialog {
    min-width: 640px;
  }

  .el-form {
    .el-form-item.slider {
      width: 100%;
    }
    ::v-deep.range {
      width: 100%;
      .el-form-item__content {
        display: flex;
        .timepicker {
          width: 100%;
        }
      }
    }
  }
}
</style>
